<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <link href='/static/js/plugins/datePick/fullcalendar/fullcalendar.css' rel='stylesheet'/>
    <link href='/static/js/plugins/datePick/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print'/>
    <script src='/static/js/plugins/datePick/lib/jquery.min.js'></script>
    <script src='/static/js/plugins/datePick/lib/jquery-ui.custom.min.js'></script>
    <script src='/static/js/plugins/datePick/fullcalendar/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function () {
            $('#external-events div.external-event').each(function () {
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                };
                $(this).data('eventObject', eventObject);
                $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });
            });


            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                drop: function (date, allDay) { // this function is called when something is dropped
                    var originalEventObject = $(this).data('eventObject');
                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                    if ($('#drop-remove').is(':checked')) {
                        $(this).remove();
                    }
                }
            });
        });
    </script>

    <style>
        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        }

        #wrap {

            width: 1100px;

            margin: 0 auto;

        }

        #external-events {

            float: left;

            width: 150px;

            padding: 0 10px;

            border: 1px solid #ccc;

            background: #eee;

            text-align: left;

        }

        #external-events h4 {

            font-size: 16px;

            margin-top: 0;

            padding-top: 1em;

        }

        .external-event { /* try to mimick the look of a real event */

            margin: 10px 0;

            padding: 2px 4px;

            background: #3366CC;

            color: #fff;

            font-size: .85em;

            cursor: pointer;

        }

        #external-events p {

            margin: 1.5em 0;

            font-size: 11px;

            color: #666;

        }

        #external-events p input {

            margin: 0;

            vertical-align: middle;

        }

        #calendar {

            float: right;

            width: 900px;

        }


    </style>

</head>

<body>

<div id='wrap'>
    <div id='external-events'>
        <h4>Draggable Events</h4>
        <div class='external-event'>计划一</div>
        <div class='external-event'>计划二</div>
        <div class='external-event'>计划三</div>
        <div class='external-event'>计划四</div>
        <div class='external-event'>计划五</div>
        <%--<p>--%>
            <%--<input type='checkbox' id='drop-remove'/> <label for='drop-remove'>remove after drop</label>--%>
        <%--</p>--%>
    </div>
    <div id='calendar'></div>
    <div style='clear:both'></div>
</div>
</body>
</html>

